import { Component } from 'react';
import './Stations.less';
import Stationinfo from 'components/stationinfo';

export default class Stations extends Component {

  constructor(props) {
    super(props);
    this.state = {
      upIndex: -1,
      downIndex: -1,
      value: '',
      singleWidth: '',
    }
  }

  static defaultProps = {

  }
  static propTypes = {

  }
  itemClick(value, index, direction) {
    switch (direction) {
      case 'down':
        this.setState({
          upIndex: -1,
          downIndex: index,
          value
        });
        break;
      default:
        this.setState({
          upIndex: index,
          downIndex: -1,
          value
        })
        break;
    }
  }

  render() {
    const { stations } = this.props;
    let jsx = null,
      circle = false,
      html_1 = null,
      html_2 = null,
      { upIndex, downIndex, value, singleWidth } = this.state;
    if (!!stations.length) {
      if (stations.length == 1) {
        circle = true;
        jsx = stations[0].map((item, key) => {
          return <span key={key} style={{ width: singleWidth }} className={key == upIndex ? 'item-active stations-item' : 'stations-item'} onClick={this.itemClick.bind(this, item, key, 'up')}>{item}</span>
        });
      } else {
        circle = false;
        html_1 = stations[0].map((item, key) => {
          return <span key={key} style={{ width: singleWidth }} className={key == upIndex ? 'item-active stations-item' : 'stations-item'} onClick={this.itemClick.bind(this, item, key, 'up')}>{item}</span>
        });
        html_2 = stations[1].map((item, key) => {
          return <span key={key} style={{ width: singleWidth }} className={key == downIndex ? 'item-active stations-item' : 'stations-item'} onClick={this.itemClick.bind(this, item, key, 'down')}>{item}</span>
        });
      }
    }
    return (
      <div className="mod-stations">
        {circle ? (
          <div className="all">
            <div>
              <div className="name-stations">
                <label htmlFor="">{stations[0][0]}</label>
                <span className="kuma-icon kuma-icon-arrow-right station-arrow"></span>
                <label htmlFor="">{stations[0][stations[0].length - 1]}</label>
                <span className="sutations">
                  <span>畅通</span>
                  <span>轻微</span>
                  <span>拥堵</span>
                </span>
              </div>
              <div className="detail" ref="detail">
                {jsx}
              </div>
            </div>
          </div>) : (
            <div className="all">
              <div>
                <div className="name-stations">
                  <label htmlFor="">{stations[0][0]}</label>
                  <span className="kuma-icon kuma-icon-arrow-right station-arrow"></span>
                  <label htmlFor="">{stations[0][stations[0].length - 1]}</label>
                  <span className="sutations">
                    <span>畅通</span>
                    <span>轻微</span>
                    <span>拥堵</span>
                  </span>
                </div>
                <div className="detail" ref="detail">
                  {html_1}
                </div>
              </div>
              <div>
                <div className="name-stations">
                  <label htmlFor="">{stations[1][0]}</label>
                  <span className="kuma-icon kuma-icon-arrow-left station-arrow"></span>
                  <label htmlFor="">{stations[1][stations[1].length - 1]}</label>
                </div>
                <div className="detail" ref="detail">
                  {html_2}
                </div>
              </div>
            </div>
          )
        }
        {value && (<div className="info"><Stationinfo data={value} /></div>)}
      </div>
    );
  }
  componentDidMount() {
    let width = this.refs.detail.clientWidth;
    let { state: { singleWidth }, props: { stations } } = this;
    if (!!stations.length) {
      if (stations.length == 1) {
        singleWidth = (width / stations[0].length).toFixed(2) + 'px';
        this.setState({ singleWidth })
      } else {
        let length = Math.max(stations[0].length, stations[1].length);
        singleWidth = (width / length).toFixed(2) + 'px';
        this.setState({ singleWidth })
      }
    }
  }
}
